<script setup>
import VueChart from "@/components/VueChart.vue";
import { ref, onMounted } from "vue";

// 图表数据
const chartData = ref({
  value: 0,
});

// 图表配置
const option = ref({
  backgroundColor: "transparent",
  title: {
    text: "{a|0}{c|%}",
    x: "center",
    y: "center",
    textStyle: {
      rich: {
        a: {
          fontSize: 48,
          color: "#29EEF3",
        },
        c: {
          fontSize: 20,
          color: "#ffffff",
        },
      },
    },
  },
  legend: {
    type: "plain",
    orient: "vertical",
    right: 0,
    top: "10%",
    align: "auto",
    data: [],
    textStyle: {
      color: "white",
      fontSize: 16,
      padding: [10, 1, 10, 0],
    },
    selectedMode: false,
  },
  series: [
    {
      name: "饼图",
      type: "pie",
      radius: ["58%", "30%"],
      silent: true,
      clockwise: true,
      startAngle: 90,
      center: ["50%", "50%"],
      z: 0,
      zlevel: 0,
      label: {
        normal: {
          position: "center",
        },
      },
      data: [
        {
          value: 0,
          name: "",
          itemStyle: {
            normal: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "#4FADFD",
                  },
                  {
                    offset: 1,
                    color: "#28E8FA",
                  },
                ],
              },
            },
          },
        },
        {
          value: 100,
          name: "",
          label: {
            normal: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: "#173164",
            },
          },
        },
      ],
    },
  ],
});

// 更新图表数据和配置
const updateChart = (data) => {
  chartData.value = data;
  option.value.title.text = `{a|${data.value}}{c|%}`;
  option.value.series[0].data[0].value = data.value;
  option.value.series[0].data[1].value = 100 - data.value;
};

// 模拟接口调用
const fetchData = async () => {
  try {
    // 这里模拟异步请求
    const mockData = {
      value: 55.33,
    };

    // 模拟接口延迟
    await new Promise((resolve) => setTimeout(resolve, 500));
    updateChart(mockData);
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};

onMounted(() => {
  fetchData();
});
</script>

<template>
  <vue-chart :options="option" />
</template>

<style scoped lang="scss"></style>
